<template>
	<view class="container">
		<NavBar :title="formPage=='drafts'?'草稿详情':'上传学习资料'" @clickRightFn="clickRightFn"
			:iconClass="formPage=='drafts'?'':'icon-lishijilu'" />
		<view class="container-item">
			<uni-forms ref="baseForm" :modelValue="baseFormData" labelWidth="100px" label-position="left">

				<uni-forms-item label="上传人" required style="display: flex;align-items: center;text-align: right;">
					<text>{{baseFormData.userName}}</text>
				</uni-forms-item>

				<uni-forms-item label="标题" required>
					<uni-easyinput trim="all" v-model="baseFormData.title" placeholder="请输入"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item label="学习类型" required>
					<uni-data-select v-model="baseFormData.learningType" :localdata="range2" placeholder="请选择"
						@change="changeLearningType">
					</uni-data-select>
				</uni-forms-item>

				<uni-forms-item v-if="baseFormData.learningType == 1" label="是否为多个视频" required
					style="display: flex;align-items: center;text-align: right;">
					<radio-group @change="chnageRadio">
						<label class="radio">
							<radio value="1" :checked="this.baseFormData.whetherVideos == 1" />是
						</label>
						<label class="radio">
							<radio value="2" :checked="this.baseFormData.whetherVideos == 2" />否
						</label>
					</radio-group>
				</uni-forms-item>

				<uni-forms-item v-show="baseFormData.learningType" label="文件" style="height: 80rpx; ">
					<!-- 添加视频 mp4,avi -->
					<lsj-upload v-if="fileAccept == 1" style="position:absolute !important;" ref="lsjUpload" childId="upload1"
						:size="uploadconfig2.size" :instantly="uploadconfig2.instantly" formats="mp4,avi,mov" :option="option"
						@change="onChange" @uploadEnd="onuploadEnd" @progress="onProgress" @fail="failFile">
						<view style="width: 100%;text-align: right;color: #3C95FF;" @click="fuckyou">
							添加视频
						</view>
					</lsj-upload>

					<!-- 添加文档 docx,doc-->
					<lsj-upload v-if="fileAccept == 2" style="position:absolute !important;" ref="lsjUpload" childId="upload1"
						:size="uploadconfig2.size" :instantly="uploadconfig2.instantly" formats="docx,doc" :option="option"
						@change="onChange" @uploadEnd="onuploadEnd" @progress="onProgress" @fail="failFile">
						<view style="width: 100%;text-align: right;color: #3C95FF;" @click="fuckyou">
							添加文档
						</view>
					</lsj-upload>

					<!-- 电子图书 pdf,txt -->
					<lsj-upload v-if="fileAccept == 3" style="position:absolute !important;" ref="lsjUpload" childId="upload1"
						:size="uploadconfig2.size" :instantly="uploadconfig2.instantly" formats="pdf,txt" :option="option"
						@change="onChange" @uploadEnd="onuploadEnd" @progress="onProgress" @fail="failFile">
						<view style="width: 100%;text-align: right;color: #3C95FF;" @click="fuckyou">
							添加文件
						</view>
					</lsj-upload>

					<!-- 专题学习 docx,doc-->
					<lsj-upload v-if="fileAccept == 4" style="position:absolute !important;" ref="lsjUpload" childId="upload1"
						:size="uploadconfig2.size" :instantly="uploadconfig2.instantly" formats="docx,doc" :option="option"
						@change="onChange" @uploadEnd="onuploadEnd" @progress="onProgress" @fail="failFile">
						<view style="width: 100%;text-align: right;color: #3C95FF;" @click="fuckyou">
							添加专题
						</view>
					</lsj-upload>

					<text class="file_type">只支持上传{{fileType}}类型文件</text>

				</uni-forms-item>
					<progress v-if="percent !=0&&percent !=100" :percent="percent" show-info stroke-width="3" />
				<view v-if="baseFormData.fileUrl.length">
					<view class="file_list" v-for="(item, index) in baseFormData.fileUrl" :key="index">
						<view class="file_list_item" @click="prevFileClick(item)">
							<view>{{ item.name }}</view>
						</view>
						<view class="iconfont icon-close" @click="delFile(index)"></view>
					</view>
				</view>

				<uni-forms-item v-show="baseFormData.learningType == 1" label="链接">
				</uni-forms-item>
				<view v-show="baseFormData.learningType == 1" class="textarea_con">
					<!-- 					<view v-if="baseFormData.whetherVideos == 2">
						<uni-easyinput class="url_class" trim="all" v-model="baseFormData.url" placeholder="请输入"
							placeholder-style="text-align: left;"></uni-easyinput>
					</view> -->
					<!-- <view v-if="baseFormData.whetherVideos == 1"> -->
					<view>
						<view v-for="(item, index) in whetherVideosArr" :key="index" class="upload_url">
							<uni-easyinput class="url_class" placeholder-style="text-align: left;" v-model="item.url"
								placeholder="请输入……" @blur="ulrBlur(item.url, index)"></uni-easyinput>
							<i class="iconfont icon-xinzeng1" style="color: #3B95FF;" v-if="item.index == 0" @click="addUrl"></i>
							<i class="iconfont icon-shanchu" style="color: #E86565; font-size: 36rpx;" v-if="item.index"
								@click="delUrl(index)"></i>
						</view>
					</view>
				</view>


				<uni-forms-item label="上传时间" required style="display: flex;align-items: center;text-align: right;">
					<text>{{baseFormData.createTime}}</text>
				</uni-forms-item>


				<view style="padding-top: 20px"></view>
				<view class="btns">
					<button v-if="formPage!='drafts'" class="save-draft" @click="resetUpload">
						取消
					</button>
					<button class="publish" :style="formPage=='drafts'?'width:700rpx':''" :disabled="disabledPublish"
						:loading="publishLoading" @click="saveDraft">
						确定
					</button>
				</view>
				<view style="padding-top: 20px"></view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	// 接口
	import {
		apiEducationList, // 学习类型
		apiUploadData, // 上传
	} from "../../net/educationalLearning.js";

	import {
		previewPic,
		format,
		getDateFn
	} from "../../utils/fun.js";
	import {
		prevFile, // 预览文件
	} from "../../utils/preview.js"
	import {
		serverUrl2,
		uploadconfig2
	} from "../../const"

	import NavBar from "@/components/NavBar.vue";
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				uploadconfig2,
				option: {
					url: uploadconfig2.url,
					name: "file",
					header: {
						Authorization: uni.getStorageSync("token"),
						platform:"APP"
					},
					formData: {},
				},

				// ------------------
				percent:0,
				fileType: '',
				whetherVideosArr: [], // 多个视频链接
				fileAccept: 0, //上传文件格式限制
				imgWidth: 200,
				imgHeight: 132,
				range2: [], //学习类型

				// 开始时间和结束时间限制


				uploadURL: '/masses/common/upload', // 上传接口地址
				formPage: "", // 来自哪个页面


				disabledPublish: false,
				publishLoading: false,
				// 文件回显列表
				files: new Map(),

				suffix: "", //后缀名
				baseFormData: {},
			};
		},
		computed: {},
		watch: {
		"baseFormData.learningType": {
			handler(val) {
				console.log(val,"++++++++++++++++++++++++++++++++++++++");
				if(!val) {
					this.baseFormData.fileUrl = [];					
				}
			},
			immediate: true
		}
		},
		onLoad(options) {
			this.baseFormData = {
				learningType: "",
				whetherVideos: 2,
				fileUrl: [],
			};

			// this.getApiChamberList();
			setTimeout(() => {
				this.fuckyou();
			}, 1000)

			// 从草稿箱跳转来

			this.init();
		},
		methods: {
			init() {
				this.baseFormData.userName = JSON.parse(uni.getStorageSync("loginUserInfo")).userName;
				this.baseFormData.userId = JSON.parse(uni.getStorageSync("loginUserInfo")).uid;
				this.baseFormData.createTime = getDateFn();

				this.getEducationList();
			},

			// 验证是否上传的是视频链接
			ulrBlur(url, index){
				let reg = /^http(s)?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/;

				if (!reg.test(url)) {
					uni.showToast({
						title: '视频地址不正确',
						icon:"error",
						duration: 2000
					});
					this.whetherVideosArr[index].url = "";
					return;
				}
			},

			// 取消上传
			resetUpload() {
				this.baseFormData = {
					learningType: "",
					whetherVideos: 2,
					fileUrl: [],
				};
				this.init();
			},

			// 添加链接
			addUrl() {
				let index = this.whetherVideosArr.length;
				this.whetherVideosArr.push({
					index,
					url: "",
				});
			},
			// 删除链接
			delUrl(index) {
				this.whetherVideosArr.splice(index, 1);
			},

			changeLearningType(e) {
				console.log(e);
				switch (e) {
					case 1: // 视频学习
						this.baseFormData.learningType == 1;
						this.fileAccept = 1;
						this.whetherVideosArr = [{
							index: 0,
							url: null,
						}, ]; // 多个视频链接
						this.baseFormData.whetherVideos = "2";
						this.fileType = "mp4,avi,mov";
						break;
					case 2: // 文档资料
						this.fileAccept = 2;
						this.fileType = "docx,doc";
						break;
					case 3: // 电子图书
						this.fileAccept = 3;
						this.fileType = "pdf,txt";
						break;
					case 4: // 专题学习
						this.fileAccept = 4;
						this.fileType = "docx,doc";
						break;
					default: //默认数据
						this.fileAccept = "";
						break;
				}
			},

			// 点击复选框
			// whetherVideos
			chnageRadio(e) {
				this.baseFormData.whetherVideos = e.detail.value;
			},

			// 预览上传的文件
			prevFileClick(item) {
				prevFile(item);
			},

			uniShowToast(title, icon = "error") {
				uni.showToast({
					title,
					icon,
				});
			},

			// 预览 图片
			prePic(url) {
				let arr = [url];
				previewPic(arr);
			},


			// 删除附件
			delFile() {
				for (let i = 0; i < this.baseFormData.fileUrl.length; i++) {
					this.baseFormData.fileUrl.splice(i, 1);
				};
				this.fuckyou();
			},

			getEducationList() {
				apiEducationList().then((res) => {
					if (res.code === 0) {
						this.range2 = res.data.map((v) => {
							return {
								value: v.key,
								text: v.value
							}
						});

						this.range2.length = 4;
					} else {
						this.range2 = [];
					}
				}).catch((err) => {
					console.log(err);
					this.range2 = [];
				});
			},


			// 穿刺一击让他们的遮罩层消失
			chuanci() {
				this.$refs.lsjUpload && this.$refs.lsjUpload.hide();
			},
			// 穿刺一击让他们的遮罩层消失
			chuanci2() {
				this.$refs.lsjUpload && this.$refs.lsjUpload.show();
				this.$forceUpdate()
			},
			fuckyou() {
				this.$refs.lsjUpload && this.$refs.lsjUpload.hide();
				this.$refs.lsjUpload && this.$refs.lsjUpload.show();
				this.$forceUpdate();
			},

			// 文件上传时触发
			picProgress(file) {
				console.log(file);
			},
			// 上传成功触发
			successPic(file) {
				console.log(file);
			},
			// 上传失败触发
			failPic(file) {
				console.log(file);
			},
			// 文件从列表移除时触发
			deletePic(file) {
				console.log(file);
			},

			// 上传文件的操作
			// 选择文件触发，返回所有已选择文件Map集合
			onChange(files) {
				this.files = files;
				this.$forceUpdate();
			},
			failFile(){
				uni.showToast({
	      title: '上传失败',
        icon: 'error',
        mask: true,
	      duration: 1500
      });
			},

			onProgress(res) {
				this.percent = res.progress;
			},
			// 上传结束回调，返回参数与progress一致
			onuploadEnd(item) {
				let res = JSON.parse(item.responseText);

				if (res.code === 0) {
					this.baseFormData.fileUrl.push({
						url: res.data.url,
						name: res.data.fileName
					});
					this.baseFormData.whetherVideos = this.baseFormData.fileUrl.length > 1 ? 1 : 2;
					this.suffix = item.name.substring(item.name.lastIndexOf(".") + 1);
				}

				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);

				// 强制更新视图
				this.$forceUpdate();
			},

			// 保存草稿
			saveDraft() {
				console.log(!this.baseFormData.fileUrl.length , !this.whetherVideosArr.length);
				if (!this.baseFormData.title) {
					this.uniShowToast('请输入标题内容');
					return;
				} else if (this.baseFormData.learningType == '') {
					this.uniShowToast('请选择学习类型');
					return;
				} 
				if (!this.baseFormData.fileUrl.length && !this.whetherVideosArr.length) {
					this.uniShowToast('请选择文件或链接');
					return;
				}

				let data = {
					learningType: this.baseFormData.learningType,
					title: this.baseFormData.title,
					userId: this.baseFormData.userId,
					userName: this.baseFormData.userName,
					whetherVideos: this.baseFormData.whetherVideos,
					djDeptId: JSON.parse(uni.getStorageSync('loginUserInfo')).djDeptId
				};

				let urlArr = [];
				console.log(this.whetherVideosArr);
				// return;

				if (this.whetherVideosArr.length && this.whetherVideosArr[0].url) {
					for (let i = 0; i < this.whetherVideosArr.length; i++) {
						urlArr.push(this.whetherVideosArr[i].url);
					}
				}

				// 文件
				if (this.baseFormData.fileUrl && this.baseFormData.fileUrl.length > 0) {
					let fileUrlArr = this.baseFormData.fileUrl.map((v) => {
						return {
							accessoryName: v.name,
							accessoryUrl: v.url,
						};
					});
					let fileUrlArr2 = this.baseFormData.fileUrl.map((v) => {
						return v.url;
					});

					data.fileUrl = JSON.stringify(fileUrlArr);
					urlArr = urlArr.concat(fileUrlArr2);
				}

				data.url = JSON.stringify(urlArr);

				console.log(data);
				apiUploadData(data)
					.then((res) => {
						if (res.code === 0) {
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								mask: true,
								duration: 1000
							})
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								mask: true,
								duration: 1000
							})
						}
						this.resetUpload();
					}).catch((err) => {
						console.log(err);
						uni.showToast({
							title: '操作失败',
							icon: 'error',
							mask: true,
							duration: 1000
						})
						this.resetUpload();
					});

			},

			clickRightFn() {
				uni.navigateTo({
					url: "../DJjiaoyuxuexi/UploadHistory",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
@import "/static/dangjian.scss";
	page {
		background: #fff;
		height: 100vh;
		overflow-y: scroll;
	}

	/* 学习类型箭头 */
	::v-deep .uni-popper__arrow {
		left: 80% !important;
		/* right: 10% !important; */
	}

	/* 多个视频单选框 */
	::v-deep .uni-radio-input {
		width: 28rpx;
		height: 28rpx;
	}

	.upload_url {
		display: flex;
		align-items: center;
		margin-bottom: 14rpx;
	}

	.upload_url i {
		width: 50rpx;
		text-align: center;
		font-size: 40rpx;
	}

	.uni-forms-item {
		position: relative;
	}

	.file_type {
		display: inline-block;
		color: #E86565;
		font-size: 24rpx;
		position: absolute;
		right: 0 !important;
		bottom: 0 !important;
	}


	/* 参与人员 1 */
	.people_text {
		width: 700rpx;
		min-height: 100rpx;
		padding: 8rpx;
		box-sizing: border-box;
		background: #F3F5F8;
		border-radius: 8rpx;
		border: 1rpx solid #D6DBE3;
		font-size: 30rpx;
		color: #0E1634;
		display: flex;
		flex-wrap: wrap;
	}

	.people_text view {
		margin-right: 16rpx;
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
	}

	/* 参与人员 2 */

	.form_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.container{
		background: #fff;
		height: 100%;
	}

	.container-item {
		width: 700rpx;
		margin: 0 auto;
	}

	.btns {
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.btns button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
	}

	.save-draft {
		background: #D3D3D3;
	}

	.publish {
		background: #3C95FF;
	}

	/* 预览图片 */
	.cover_pic {
		width: 200rpx;
		height: 132rpx;
		position: absolute;
		right: 0;
	}

	.cover_pic i {
		color: red;
		font-size: 36rpx;
		position: absolute;
		z-index: 100;
		right: 0;
		top: 0;
	}

	/* 参与人员 */
	.join_peo {
		position: absolute;
		right: 0;
		width: 150rpx;
		height: 70rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #6a6a6a;
	}

	.picker_views {
		position: absolute;
		z-index: 100;
		top: 100rpx;
		width: 100%;
		height: 350rpx;
		background: #fff;
		border-radius: 8rpx;
		border: 2rpx solid #e5e5e5;
		text-align: center;
	}

	.upload_img {
		padding-top: 20rpx;
		box-sizing: border-box;
		width: 200rpx;
		height: 140rpx;
		background-color: rgba(214, 219, 227, .6);
		color: #3B95FF;
		text-align: center;
	}

	.upload_img i {
		display: inline-block;
	}

	/* 活动内容 */
	.textarea_con {
		margin-bottom: 20rpx;
		width: 700rpx;
		position: relative;
	}


	.textarea_text {
		margin: 0 auto;
		width: 700rpx;
		min-height: 220rpx;
		background: #F3F5F8 !important;
		border-radius: 8rpx;
		border: 1rpx solid #D6DBE3;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.textarea_plac {
		font-size: 30rpx;
		font-weight: 500;
		color: #0E1634;
	}


	/* 上传封面 1 */
	.upload_btn {
		background: #F3F5F8;
		border-radius: 8rpx;
		float: right;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.upload_btn .upload_text {
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 10;
		transform: translate(-50%, -50%);
	}

	.upload_btn .upload_text view {
		width: 110% !important;
	}

	/* 上传封面 2 */

	/* 重置样式 */
	::v-deep .is-input-border,
	::v-deep .uni-select,
	::v-deep .uni-date-x--border {
		text-align: right;
		border: none !important;
	}

	::v-deep .uni-date {
		position: absolute;
		right: 0;
		/* 		width: 400rpx; */
	}

	::v-deep .icon-xiangxia1:before {
		content: "&#xe603;" !important;
	}

	::v-deep .uniui-calendar {
		position: absolute;
		right: 0;
	}

	::v-deep .uni-date-editor--x {
		text-align: right !important;
		padding-right: 5rpx;
	}

	/* 封面上传控件 */
	::v-deep .file-picker__box {
		position: absolute !important;
		right: 0 !important;
		width: 200rpx !important;
		height: 132rpx !important;
	}

	::v-deep .file-picker__box-content {
		border: none !important;
	}

	::v-deep .uni-input-placeholder,
	::v-deep .uni-select__input-text,
	::v-deep .uni-select__input-placeholder,
	.join_peo text {
		font-size: 30rpx !important;
		font-weight: 500 !important;
		color: #0E1634 !important;
	}

	/* 链接 */
	.url_class {
		background: red;
		text-align: left;
		width: 702rpx;
		background: #F3F5F8;
		border-radius: 8rpx;
		border: 1px solid #D6DBE3;
	}

::v-deep .uni-forms-item__label {
  font-size: 32rpx !important;
  color: #000 !important;
}
/* uni-forms-item__content 参与人员 */
::v-deep .uni-forms-item__content,
::v-deep .uni-select__input-text,
::v-deep .uni-textarea-textarea,
::v-deep .uni-input-input,
::v-deep .uni-input-placeholder {
  color: #999 !important;
  font-size: 28rpx !important;
}
</style>